iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

React基礎系列 第 10

第10天,React三種使用CSS方法

  • 分享至 

  • xImage
  •  

React三種使用CSS方法

一、在檔案中寫寫css的第一個作法

Header.js

import React from "react";

class Header extends React.Component {
style1 = {
background: 'red',
height: '25px'
};
style2 = {
width: '80%' ,
float:'left'
};
style3 = {
width: '20%' ,
float: 'right'
};

render() {
return (

		<div style = {this.style2}>
		<a href="/">首頁</a>
		</div>

		<div style = {this.style3}>
			<a href='/'>關於我們</a>  
			<a href='/'>聯絡方式</a>   
			<a href='/'>登入 </a>
		</div>
	</div>
);

}
}

export default Header;

二、在檔案中寫寫css的第二個作法
Header.js

import React from "react";

class Header extends React.Component {

render() {
return (
<div style={{background: 'red',height: '25px'}}>

		<div style = {{ width: '80%' ,float:'left'}}>
		<a href="/">Home</a>
		</div>

		<div style = {{ width: '20%' ,float: 'right'}}>
			<a href='/'>關於我們</a>  
			<a href='/'>聯絡方式</a>   
			<a href='/'>登入 </a>
		</div>
	</div>
);

}
}

export default Header;
三、外部引入 .css 檔,將css獨立到Header.css
1.先加上class,但在jsx中是加上classname
2.開一個「同名檔案.css」
3.將cs移植到css檔案中
4.在該js中import該css
5.若要所有的檔案都共同使用該css就在Index.js中import就行了。
6.放入css中的內容會與在檔案中的css的寫法會有不同。

import React from "react";
import './Header.css';

class Header extends React.Component {

render() {
return (

		<div className ='start'>
		<a href="/">首頁</a>
		</div>

		<div className ='end'>
			<a href='/'>關於我們</a>  
			<a href='/'>聯絡方式</a>   
			<a href='/'>登入 </a>
		</div>
	</div>
);

}
}

export default Header;
Header.css

.header1{
background-color: #ff5506;
height: 25px;
}

.start{ width: 30% ;
float:left;
}

.end{width: 20% ;
float: right;
}


上一篇
第九天,React 元件的生命周期:
下一篇
第十一天,React的props與state(上)
系列文
React基礎12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言